<template>
  <div class="box">
    <h1>reactive函数的使用</h1>
    <h3>基本数据类型的：{{ name }}</h3>
    <h3>引用数据类型的：{{ user }}</h3>
    <h3>数组：{{ arr }}</h3>

    <button @click="change">修改reactive定义的数据</button>
  </div>
</template>

<script>
// 1.引入reactive函数
import { reactive } from "vue";
export default {
  setup() {
    //2.定义数据
    //reactive代理基本数据类型，会有警告，定义有响应式的基本数据类型一般用ref
    let name = reactive("貂蝉");

    let user = reactive({
      sex:"男",
      age:18
    })

    let arr = reactive([1,2,3]);

    console.log(name);
    console.log(user);

    //4.定义方法，修改值
    function change(){
      //如果使用reactive定义基本数据类型，有警告，这个数据没有响应式
      name = "西施";

      //修改引用类型数据 --- 有响应式的
      user.sex = "哈哈哈";
      user.age = 98;

      //给user添加新属性 ：vue2里面没有在data中定义的属性不是响应式，$set，reactive解决了这个问题
      user.name = "王昭君"

      //修改对应位置的数组的值 -- 直接通过下标修改，也可以实现响应式
      arr[1] = "哈哈"


      //问题：如果被代理对象user=一个新的数据，这个数据没有reactive代理，就没有响应式了
      user = {
        sex:"我是性别"
      }
      console.log("数据修改了",name,user);
    }


    //3.return
    return {
      name,
      user,
      arr,
      change
    }
  },
};
</script>

<style>
</style>